<!-- 会员列表 -->
<template>
    <div>
        <el-button type="primary" @click="shouAddMember">新增会员 + </el-button>
        <el-table :data="memberData" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="tel" label="电话" width="180" />
            <el-table-column prop="carnumber" label="车牌号" />
            <el-table-column prop="time" label="注册时间" :formatter="dateFormat" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="updateMember(scope.row)">修改</el-button>
                    <el-button type="danger" @click="delMember(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <div class="example-pagination-block">
            <el-pagination layout="prev, pager, next" :total="100" />
        </div>
        <!-- 新增会员 -->
        <el-drawer v-model="visible" :show-close="false" :direction="direction">
            <template #header="{ close, titleId, titleClass }">
                <h4 :id="titleId" :class="titleClass">{{ topTitle }}</h4>
                <el-button type="danger" @click="close" circle>
                    ×
                </el-button>
            </template>
            <el-form :model="addMemberData">
                <el-form-item label="姓  名">
                    <el-input placeholder="请输入姓名" v-model="addMemberData.name" clearable></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input placeholder="请输入手机号" v-model="addMemberData.tel" clearable></el-input>
                </el-form-item>
                <el-form-item label="车牌号">
                    <el-input placeholder="请输入车牌号" v-model="addMemberData.carId"></el-input>
                </el-form-item>
                <el-form-item label="操作">
                    <el-button type="primary" @click="addMemberBtn">{{
                        topTitle
                    }}</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import type { Imember, newMember, updateMember } from "@/util/member";
import { memberList, delTheMember, newAMember, updateAMember } from "@/api/member"
import { ref, reactive } from "vue";
import { ElNotification } from "element-plus";
// 格式化日期
const dateFormat = (row: any) => { return dayjs(row.regtime).format("YYYY-MM-DD HH:mm:ss"); }
let direction = ref('ltr')
// 会员对象
const memberData = reactive<Array<Imember>>([])
function loadMemberList() {
    memberList().then(resp => {
        if (resp.data.code == 20000) {
            memberData.splice(0, memberData.length, ...resp.data.data);
            console.log(memberData);

        }
    })
}
loadMemberList();
// 新增会员
let addMemberData = reactive<newMember>({
    name: "",
    tel: "",
    carId: "",
});
/**
 * 修改会员对象
 */
let updateMemberData = reactive<updateMember>({
    name: "",
    tel: "",
    carId: "",
    days: 0,
    month: 0,
    id: ""
})
// 添加和修改时使用的右侧抽屉窗口显示和隐藏的变量
let visible = ref<boolean>(false);
// 定义变量用于控制点击添加和修改时，弹出的右侧抽屉顶部标题
let topTitle = ref<string>("");
/**
 * 打开新增会员
 */
function shouAddMember() {
    direction = ref('ltr')
    // 清空表单
    resetFrom();
    // 显示窗口
    visible.value = true;
    // 修改窗口顶部标题
    topTitle.value = "添加会员";
}

function updateMember(data: any) {
    direction = ref('rtl')
    // 防止抽屉中的表单项有预留的数据
    resetFrom();
    // 修改窗口可见
    visible.value = true;
    // 修改窗口顶部标题
    topTitle.value = "修改会员";
    // 修改前数据回显
    addMemberData.name = data.name;
    addMemberData.tel = data.tel;
    addMemberData.carId = data.carnumber;
    // 修改会员数据
    updateMemberData.name = data.name;
    updateMemberData.tel = data.tel;
    updateMemberData.carId = data.carnumber;
    updateMemberData.month = data.month;
    updateMemberData.days = data.days;
    updateMemberData.id = data.id;
}
/**
 * 提交新增会员
 */
function addMemberBtn() {
    if (topTitle.value == "添加会员") {
        newAMember(addMemberData).then(resp => {
            if (resp.data.code == 20000) {
                ElNotification({
                    message: resp.data.msg,
                    type: "success",
                });
                loadMemberList();
                resetFrom();
            }
        })
    } else if (topTitle.value == "修改会员") {
        updateAMember(updateMemberData).then(resp => {
            if (resp.data.code == 20000) {
                ElNotification({
                    message: resp.data.msg,
                    type: "success",
                });
                loadMemberList();
                resetFrom();
            }
        })
    }
}
/**
 * 删除会员
 */
function delMember(id: string) {
    console.log(id);

    delTheMember({ id: id }).then(resp => {
        if (resp.data.code == 20000) {
            ElNotification({
                message: "删除成功",
                type: "success",
            });
            loadMemberList();
        }
    })
}
// 重置抽屉表单中的数据
const resetFrom = () => {
    addMemberData.name = "";
    addMemberData.tel = "";
    addMemberData.carId = "";
};
</script>

<style scoped>
.example-pagination-block+.example-pagination-block {
    margin-top: 10px;
}

.example-pagination-block .example-demonstration {
    margin-bottom: 16px;
}
</style>